<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<title>中国中车地图</title>
  <!-- base -->
  <link rel="stylesheet" href="${path}/resource/css/base.css">
 
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css"> 
  
  <!-- main -->
  <link rel="stylesheet" href="${path}/resource/css/ysrmain.css">
  <link rel="stylesheet" href="${path}/resource/css/main.css">
  <!-- echarts JS-->
  <script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>
  
  
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>

<style type="text/css">
	html,body{height: 100%;}
	.glxt{
		    position: fixed;
		    display: block;
		    width: 7%;
		    height: 5%;
		    background-color: #fff;
		    bottom: 5%;
		    left: 30%;
		    opacity: 0;	
		    cursor:pointer;
		    
	}
	.jkxt{
		    position: fixed;
		    display: block;
		    width: 7%;
		    height: 5%;
		    background-color: #fff;
		    bottom: 5%;
		    cursor:pointer;
		    left: 64%;
		    opacity: 0;
	}
	.wx-btn .ab{
		display:none;
	}
	.wx-btn{
		padding-top:20px;
		height:80px;
		padding-bottom:10px;
	}
	.table{
		margin-bottom: 0;
	}
	.color-m1{
		color:#20FCFF;
	}
	.color-w{
		color:#fff;
	}
	.ab .left-a{
		position:absolute;
		left:10%;
	}
	.ab .right-a{
		position:absolute;
		right:10%;
	}
	
	
	
	
</style>
</head>
<body style="background:#020113;">

<div class="wrapper" style="height:100%">
    <div class="top">
		<div class="top-left">
		<img src="${path}/resource/images/logo_white.png" class="float-l"></img>	
		</div>
		<div class="top-right">
		<span class="color-w btn-white btn-left"><img src="${path}/resource/ysr/images/icon_user.png" class="back-icon"></span><span class="color-w btn-no margin-r-1">admin</span>		
				
		<span class="color-w btn-all"><a class="color-3" >退出系统 <img src="${path}/resource/ysr/images/back.png" class="back-icon"></a></span>

		</div>
	</div>
	<!-- /.content-wrapper -->
	<!--/.control-sidebar-bg-->
    <div class="map-wrap" style="height:100%">
        <div class="map-mid">
            <div class="map-mid-item" style="position:inherit;">
            	<div style="top:20px;right:300px;">
            		<div class="zst" style="display: none;">
						<!----地图锚点-->
						<div class="locat-item"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item1"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item2"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item3"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item4"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item5"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item6"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
	                   
						<div class="t-box blue" style="position:relative;top:179px;left:1401px;display:none;">
	                    	<div class="ac" style="border-bottom: 1px solid rgb(62, 243, 68); padding-bottom: 10px;"><img src="${path}/resource/images/gx_08.png"/></div>
							<div class="mt10">
								<span class="al">设备型号：</span>
								<span class="ar">369</span>
							</div>
							<div class="mt10">
								<span class="al">位置信息：</span>
								<span class="ar">宁波市</span>
							</div>
							<div class="mt10">
								<span class="al">运行情况：</span>
								<span class="ar">正常</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wxt " style="height:100%">
<!-- 			<div id="bllmap" style="width:115%;height:900px;left: 26%;margin-left: -500px;"></div> -->
			<div id="bllmap" style="width:100%;height:100%"></div>
		</div>
       	
    	<!--/.map-mid-->
    	<div class="float-wrap">
    		<div class="left-sidebar pull-left">
            	<div class="side-title">
                	<p class="ac" style="letter-spacing:1px;">社会贡献值</p>
                </div>
                <div class="side-box" style="background-color: rgba(61, 89, 113, 0.7);">
                	<div class="all-list">
                	<dl class="a-list">
                    	<dd>
                        	<div class="row">
                            	<div class="col-xs-4">
                                	<img src="${path}/resource/images/icon-yun.png" alt="二氧化碳"/>
                                 </div>
                                <div class="col-xs-8" style="">
                                	<div style="margin-bottom:-8px;"><span id="co2" class="color-m1" style="font-size:3em;">1500</span><span class="color-w" >千克</span></div><p  class="color-w">CO2减排</p>
                                </div>
                            </div>
                        </dd>
                        <dd>
                        	<div class="row">
                            	<div class="col-xs-4">
                                	<img src="${path}/resource/images/icon-dian.png" alt="二氧化碳"/>
                                 </div>
                                <div class="col-xs-8" style="">
                                	<div style="margin-bottom:-8px;"><span id="electric" class="color-m1"  style="font-size:3em;">2000</span><span class="color-w" >度</span></div><p class="color-w">耗电节省</p>
                                </div>
                            </div>
                        </dd>
                        <dd>
                        	<div class="row">
                            	<div class="col-xs-4">
                                	<img src="${path}/resource/images/icon-mei.png" alt="二氧化碳"/>
                                 </div>
                                <div class="col-xs-8" style="">
                                	<div style="margin-bottom:-8px;"><span id="coal" class="color-m1" style="font-size:3em;">3000</span><span class="color-w" >吨</span></div><p class="color-w">燃煤节省</p>
                                </div>
                            </div>
                        </dd>
                        <div class="clear"></div>
                    </dl>
                   <div class="mt20">
                   	<h4 class="color-w " style="padding-left:5px">运维总量</h4>
                	<ul class="msb-list">
                    	<li>
                        	<div class="pull-left">装机总容量：</div>
                            <div class="pull-right">60000KW</div>
                            <div class="clear"></div>
                        </li>
                     	<li>
                        	<div class="pull-left">运行总时长：</div>
                            <div class="pull-right">290h</div>
                            <div class="clear"></div>
                        </li>
                    	<li>
                        	<div class="pull-left">设备运行率：</div>
                            <div class="pull-right">98%</div>
                            <div class="clear"></div>
                        </li>
                        <div class="clear"></div>
                    </ul>
                    </div>
                </div>
                    <div style="border-top:1px solid rgb(59, 57, 57);">
                        	<a href="javascript:return false;" id="up" class="btn-up ac"><img src="${path}/resource/images/arrow_up.png"/></a>
                    </div>
                    
                </div>
                
                <div class="">
                	<div class="row wx-btn">
                    	<div class=" ac ab ">
                        	<a id="example1" class="left-a" href="javascript:void(0)">卫星图</a>
                        </div>
                        <div class=" ac ab">
                        	<a  class="right-a" href="<%=path%>/common/redirect/exhibition" >展示图</a>
                        </div>
                    </div>
                </div>
    		</div>
    		<!--/.left-sidebar-->
            <div class="right-sidebar pull-right">
            	<div class="side-title">
                	<p class="ac" style="letter-spacing:1px;">全部设备列表</p>
                </div>
                <div class="side-box" style="background-color:rgba(61, 89, 113, 0.7);">
                	<div class="change">
	                	<dl>
	                    	<dd style="border:none;">
	                        	<div class="row">
	                            	<div class="col-xs-4">
	                                	<img src="${path}/resource/images/equip_01.png" alt="全部设备"/>
	                                 </div>
	                                <div class="col-xs-8" style="margin-top:-10px;">
	                                	<div><span class="color-w">全部设备</span><span id="allnum" style="font-size:3em;" class="color-m1">200</span><span class="color-w">台</span></div>
	                                </div>
	                            </div>
	                        </dd>
	                        <dd style="border:none;">
	                        	<div class="row">
	                            	<div class="col-xs-4">
	                                	<img src="${path}/resource/images/equip_02.png" alt="健康设备"/>
	                                 </div>
	                                <div class="col-xs-8" style="margin-top:-10px;">
	                                	<div><span class="color-w">健康设备</span><span id="runnum" style="font-size:3em;" class="color-m1">200</span><span class="color-w">台</span></div>
	                            	</div>
	                            </div>
	                        </dd>
	                         <dd style="border:none;">
	                        	<div class="row">
	                            	<div class="col-xs-4">
	                                	<img src="${path}/resource/images/equip_03.png" alt="故障设备"/>
	                                 </div>
	                                <div class="col-xs-8" style="margin-top:-10px;">
	                                	<div><span class="color-w">故障设备</span><span id="errornum" style="font-size:3em;" class="color-m1">200</span><span class="color-w">台</span></div>
	                            	</div>
	                            </div>
	                        </dd>
	                        <div class="clear"></div>
	                    </dl>
                    	<div>
	                    	<div style="position:relative;top:0px;width:100%;background-color:rgba(41, 159, 255, 0.7);">
	                        	<p class="white ac" style="margin: 0px;position: relative;z-index: 9;top:7px;">新增设备统计啊</p>
	                    		<div id="container" style="width:90%;height: 16em;top:-17px;left:5%;"></div>
								
	                        </div>
	                    	<table class="table table-striped sb-tab">
	                            <tbody>
	                                <tr>
	                                    <td class="blue al">2014</td>
	                                    <td class="blue ac">200</td>
	                                    <td class="blue ar">+25%</td>
	                                </tr>
	                                <tr>
	                                    <td class="blue al">2015</td>
	                                    <td class="blue ac">350</td>
	                                    <td class="red ar">+55%</td>
	                                </tr>
	                                <tr>
	                                    <td class="blue al">2016</td>
	                                    <td class="blue ac">390</td>
	                                    <td class="blue ar">+35%</td>
	                                </tr>
	                            </tbody>
	                        </table>
	                        </div>
                        
                    	</div>
                </div>
                <div style="border-top:1px solid rgb(1, 29, 76);">
                        	<a href="javascript:return false;" id="btn-up" class="btn-up ac"><img src="${path}/resource/images/arrow_up.png"/></a>
                 </div>
            </div>
            <!--/.right-sidebar-->
            <div class="clear"></div>
        	<!--/.clearfix-->
        </div>
    	<!--/.float-wrap-->
    </div>
    
    <!--/.map-wrap-->
</div>
<!-- ./wrapper -->
<footer class="bottom-item" >
	<img src="${path}/resource/images/btn_bg.png" alt="空调变频器分布信息"/>
	<%-- <div class="bottom-t-btn">
		<div class="pull-left">
			<a href="<%=path%>/manage"><img src="${path}/resource/images/glxt.png" style="width:150px;"/></a>
		</div>
		<div class="pull-right">
			<a href="#"><img src="${path}/resource/images/jkxt_over.png" style="width:150px;"/></a>
		</div>
		<div class="clear"></div>
	</div> 
	<div style="width:190px;margin:0 auto;position:relative;top:-55px;"><img src="${path}/resource/images/bootom_logo.png" alt="空调变频器分布信息" /></div>--%>
</footer>
<!--btn-->
<a class="glxt" href="<%=path%>/monitor/redirect/equipInput"></a>
<a class="jkxt" href="<%=path%>/manage/redirect/allEquip/allEquipList"></a>
<!--/.bottom-wrap-->

<!-- jQuery 2.2.3 -->
<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="${path}/resource/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${path}/resource/dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="${path}/resource/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="${path}/resource/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${path}/resource/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="${path}/resource/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="${path}/resource/plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="${path}/resource/dist/js/pages/dashboard2.js"></script> -->
<!-- AdminLTE for demo purposes -->
<script src="${path}/resource/dist/js/demo.js"></script>
<script type="text/javascript">
/*切换显示  */
 	 $(function(){
		$(".wx-btn").mouseover(function(){
			$(".ab").show(500);
		}).mouseleave( function(){
	          $(".ab").hide(500);
	    });
		
		$("#up").click(function(){
			  $(".all-list").slideToggle();
		});
		$("#btn-up").click(function(){
			  $(".change").slideToggle();
		});
		
	})
	
	
	
/*  */
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '',
            subtext: ''
        },
			backgroundColor:['rgba(0,0,0,0)'],
        color:['#fff','#299fff'],
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
                lte: 6,
                color: 'green'
            }, {
                gt: 6,
                lte: 8,
                color: 'red'
            }, {
                gt: 8,
                lte: 14,
                color: 'green'
            }, {
                gt: 14,
                lte: 17,
                color: 'red'
            }, {
                gt: 17,
                color: 'green'
            }]
        },
        series: [
            {
                name:'用电量',
                type:'line',
                smooth: true,
                data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                markArea: {
                    data: [ [{
                        name: '早高峰',
                        xAxis: '07:30'
                    }, {
                        xAxis: '10:00'
                    }], [{
                        name: '晚高峰',
                        xAxis: '17:30'
                    }, {
                        xAxis: '21:15'
                    }] ]
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<script type="text/javascript" src="${path}/resource/js/testMapData.js"></script>
<script type="text/javascript">

	var map;
	function initmap() {
		// 百度地图API功能
		map = new BMap.Map("bllmap");
		map.setMapType(BMAP_HYBRID_MAP); //设置默认为卫星图
		var point = new BMap.Point(110.000,25.000);
		map.centerAndZoom(point, 5);
		map.setMinZoom(4);
		map.enableScrollWheelZoom(true); //允许滚轮缩放
		//new BMap.Size(19,25)
	}
	
	function addDataToMap(mapdata, status) {
		var myIcon = new BMap.Icon("${path}/resource/images/local.png", new BMap.Size(22,32));
		//循环数据
		$.each(mapdata, function(i) {
			var content = '<div>'+
							'<div style="float:left;"><img src="${path}/resource/images/gx_08.png"/></div>'+
							'<div ">'+
							'<div>设备型号：369</div>'+
							'<div><span>位置信息：</span><span>'+mapdata[i].name+'</span></div>'+
							'<div><span>运行情况：</span><span>'+status+'</span></div>'+
							'</div>'+
						'</div>';
			var infoWindow = new BMap.InfoWindow(content);
			
			var mappoint = new BMap.Point(mapdata[i].value[0],mapdata[i].value[1]);
			var marker = new BMap.Marker(mappoint,{icon:myIcon});  // 创建标注
			map.addOverlay(marker);               // 将标注添加到地图中
			if(mapdata[i].name=="北京") {
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			}
			marker.addEventListener("click", function(){
				alert("您点击了标注");
			});
			marker.addEventListener("mouseover", function(){
				//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				map.openInfoWindow(infoWindow, mappoint);// 打开信息窗口
			});
			marker.addEventListener("mouseout", function(){
				//map.closeInfoWindow(infoWindow);
				//map.removeOverlay(marker);
				//map.addOverlay(marker);
			});
		});
	}
	var livedata;
	$(function(){
		//var mapdata = convertData(data);
		initmap();
		//jiekou();
	})
	
	function jiekou(){
		$.ajax({
			type : 'POST',
			url : '<%=path%>/common/commonIndex',
			data : {livedata : livedata},
			dataType : 'json',
			async : false,
			success : function(result) {
				if(result.status == "OK") {
					var numarray = eval("(" + result.data.numarray + ")");
					$('#runnum').text(numarray[0]);
					$('#errornum').text(numarray[1]);
					$('#allnum').text(numarray[2]);
					
					var costlist = eval("(" + result.data.costlist + ")");
					var electric = costlist[0].toString();
					if(electric.indexOf(".") > 0) {
						electric = electric.substring(0,6);
					} else {
						electric = electric.substring(0,5);
					}
					var co2 = costlist[1].toString();
					if(co2.indexOf(".") > 0) {
						co2 = co2.substring(0,6);
					} else {
						co2 = co2.substring(0,5);
					}
					var coal = costlist[2].toString();
					if(coal.indexOf(".") > 0) {
						coal = coal.substring(0,6);
					} else { 
						coal = coal.substring(0,5);
					}
					$('#electric').text(electric);
					$('#co2').text(co2);
					$('#coal').text(coal);
					
					var offarray = eval("(" + result.data.offarray + ")");
					if(offarray != null && offarray.length >0) {
						var mapdata = [];
						for (var i = 0; i < offarray.length; i++) {
							mapdata.push({
								name: offarray[i].name,
								value: offarray[i].geoCoord
							});
						}
						addDataToMap(mapdata, "离线");
					}
					
					var awaitarray = eval("(" + result.data.awaitarray + ")");
					if(awaitarray != null && awaitarray.length >0) {
						var mapdata = [];
						for (var i = 0; i < awaitarray.length; i++) {
							mapdata.push({
								name: awaitarray[i].name,
								value: awaitarray[i].geoCoord
							});
						}
						addDataToMap(mapdata, "待机");
					}
					
					var runarray = eval("(" + result.data.runarray + ")");
					if(runarray != null && runarray.length >0) {
						var mapdata = [];
						for (var i = 0; i < runarray.length; i++) {
							mapdata.push({
								name: runarray[i].name,
								value: runarray[i].geoCoord
							});
						}
						addDataToMap(mapdata, "正常");
					}
					
					var errorarray = eval("(" + result.data.errorarray + ")");
					if(errorarray != null && errorarray.length >0) {
						var mapdata = [];
						for (var i = 0; i < errorarray.length; i++) {
							mapdata.push({
								name: errorarray[i].name,
								value: errorarray[i].geoCoord
							});
						}
						addDataToMap(mapdata, "故障");
					}
				} else {
					addDataToMap(convertData(data), "测试");
				}
			},
			error : function() {
				addDataToMap(convertData(data), "测试");
				//alert("系统错误！");
			}
		})
	}
	//获取首页实时数据
	
	var webSocket = null;
// 	var devArray=new Array();
// 	if ("WebSocket" in window) {
// 		webSocket = new WebSocket("ws://218.75.205.176:60607/websocket/web");
// 		console.log("建立实时连接！");
// 	} else if ("MozWebSocket" in window) {
// 		webSocket = new MozWebSocket("ws://218.75.205.176:60607/websocket/web");
// 		console.log("建立实时连接！");
// 	} else {
// 		alert("浏览器不支持！");
// 	}
// 	webSocket.onerror = function() {
// 		alert("无法建立实时连接！");
// 	};
// 	webSocket.onopen = function(event) {
// 		send();
// 		console.log("open");
// 	};
// 	webSocket.onmessage = function() {
// 		if(event.data.length>2){
// 			//initmap(event.data);
// 			livedata = event.data;
// 			//alert("livedata :" + livedata);
// 			jiekou();
// 			webSocket.close(); 
// 		}else{
// 			console.log("resend...");
// 			send();
// 		}
// 	};
// 	webSocket.onclose = function() {
// 		console.log("close");
// 	};
// 	function send(){    //Websocket接口
// 	    console.log("send");
// 	    var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"breakerstate\",\"runninglight\",\"faultlight\"]}]"; //调用参数
// 	    webSocket.send(message);
// 	};
// 	window.onbeforeunload = function (e) { 
// 		e = e || window.event; 
// 		if (e) { 
// 			webSocket.close();
// 		} 
// 	};
</script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
         
<script  type="text/javascript" >
$(document).ready( function(){
	$("#example1").on("click", function(event) {
		event.preventDefault();
		html2canvas(document.body, {
			allowTaint: true,
		    taintTest: false,
		    onrendered: function(canvas) {
		        canvas.id = "mycanvas";
		        //document.body.appendChild(canvas);
		        //生成base64图片数据
		        var dataUrl = canvas.toDataURL();
		        var newImg = document.createElement("img");
		        newImg.src =  dataUrl;
		        document.body.appendChild(newImg);
		    }
		});
	});
});
</script>
</body>
</html>
